<template>
<div>
    <div class="title">
        <p class="renyuan">组织树</p>
    </div>
    <Modal v-model="modal1" title="新增组织"  :loading="loading" @on-ok="asyncOK" width="570" :styles="{top:'180px'}">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" >
            <Form-item class="sost1" prop="orgName">
                <p class="tit">组织名称：</p>
                <Input v-model="formValidate.orgName"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
            </Form-item>
            <Form-item class="sost1" prop="orgCode">
                <p class="tit">组织编码：</p>
                <Input v-model="formValidate.orgCode"  size="large" placeholder="未编辑" @on-blur="checkname($event)" style="width:240px;font-size: 14px"></Input>
            </Form-item>
            <Form-item class="sost1" prop="managerName">
                <p class="tit">组织负责人：</p>
                <Input v-model="formValidate.managerName"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
            </Form-item>
            <Form-item class="sost1" prop="managerId">
                <p class="tit">组织负责人编号：</p>
                <Input v-model="formValidate.managerId"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
            </Form-item>
            <Form-item class="sost1" prop="orgType">
                <p class="tit">组织分类：</p>
                <Input v-model="formValidate.orgType"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
            </Form-item>
            <Form-item class="sost1" prop="remark" style="width: 520px;margin-bottom: 10px;">
                <p class="tit">备注</p>
                <Input v-model="formValidate.remark" type="textarea" :autosize="{minRows: 3,maxRows: 10}" placeholder="未编辑"></Input>
            </Form-item>
        </Form>
        <div slot="footer" style="text-align: center;margin:5px 0px 0px 0px;">
            <Button id="serch1"  @click="handleSubmit_zz('formValidate')" type="primary">保存</Button>
        </div>
    </Modal>
    <div class="title1">
        <div class="tree">
            <Tree :data="baseData" expand @on-select-change="selectChange"></Tree>
        </div>
        <div style="width: 848px;float: left;">
            <div class="sosuo3_5">
            <div style="display: flex;">
                <div class="sost5">
                    <p class="tit1">组织编码：</p>
                    <Input v-model="filter.orgCode" size="large" placeholder="未编辑" style="width:280px;font-size: 14px"></Input>
                </div>
                <div class="sost5">
                    <p class="tit1">组织名称：</p>
                    <Input v-model="filter.orgName" size="large" placeholder="未编辑" style="width:280px;font-size: 14px"></Input>
                </div> 
            </div>
            <div style="display: flex;">
                <div class="sost5" style="padding-top: 15px;">
                    <p class="tit1">节点状态：</p>
                    <Input v-model="filter.status" size="large" placeholder="未编辑" style="width:280px;font-size: 14px"></Input>
                </div>
                <div class="sost5" style="padding-top: 15px;">
                    <p class="tit1">组织分类：</p>
                    <Input v-model="filter.orgType" size="large" placeholder="未编辑" style="width:280px;font-size: 14px"></Input>
                </div>
            </div>
            <div>   
                <Button class="congz_5"  type="primary" style="font-size: 18px;margin-top: 30px;" @click="change">查询</Button>
                <span class="resert" @click="handleReset_2"  type="primary" style="font-size: 14px;">重置</span>
            </div>
            </div>
            <div class="tabtree">
                <Button class="xinz" @click="newadd('formValidate')" type="primary" style="font-size: 18px;">新增</Button>
                <Table stripe :columns="columns7" :data="list"></Table>
            </div>
            <div class="page">
                <div class="pagtree">
                    <Page :total="filter.total" :current="filter.pageIndex" :page-size="filter.pageSize" @on-change="changePage_zz" ></Page>
                </div>
            </div>
        </div>
    </div>
</div>   
</template>
<script>
    import Base from '../common/Base.js'
    export default {
        mixins:[Base],
        data () {
            return {
                login:false,
                parentId:'',
                baseData: [],//----------
                loading: true,
                people: '1',
                filter:{
                    orgCode:"",
                    orgName:"",
                    orgType:"",
                    status:''
                },
                formValidate: {
                    orgId:'',
                    orgName: '',
                    orgType:'',
                    tenantId: '',
                    parentId: '',
                    managerId: '',
                    managerName: '',
                    createUser: '',
                    remark:'',
                    orgCode:''
                },
                ruleValidate: {
                    orgName: [
                        { required: true, message: '组织名称不能为空', trigger: 'blur' }
                    ],
                    orgCode: [
                        { required: true, message: '组织编码不能为空', trigger: 'blur' }
                    ],
                    managerName: [
                        { required: true, message: '组织负责人不能为空', trigger: 'blur' }
                    ],
                    managerId: [
                        { required: true, message: '组织负责人编号不能为空', trigger: 'blur' }
                    ],
                    orgType: [
                        { required: true, message: '组织分类不能为空', trigger: 'blur' }
                    ],
                    remark: [
                        { required: true, message: '请输入备注', trigger: 'blur' },
                        { type: 'string', min: 5, message: '备注不能少于5字', trigger: 'blur' }
                    ]
                },
                columns7: [
                    {
                        type: 'selection',
                        key: 'action',
                        width: 50,
                        align: 'center'
                    },
                    {
                        title: '组织编码',
                        width: 80,
                        key: 'orgCode'
                    },
                    {
                        title: '组织名称',
                        width: 140,
                        key: 'orgName'
                    },
                    {
                        title: '状态',
                        width: 50,
                        key: 'zt'
                    },
                    {
                        title: '组织分类',
                        width: 100,
                        key: 'orgType'
                    },
                    {
                        title: '备注',
                        width: 180,
                        key: 'remark',
                    },
                    {
                        title: '操作',
                        width: 187,
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/xiugai.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding: '0px 15px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.index)
                                        }
                                    }
                                }, ''),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/zhuxiao.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding:' 0px 15px'
                                    },
                                    on: {
                                        click: () => {
                                            //this.remove(params.index)
                                        }
                                    }
                                }, ''),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/shanchu.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding:' 0px 15px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove_zz(params.index)
                                        }
                                    }
                                }, '')
                            ]);
                        }
                    }
                ]
            }
        },
        methods: {
            checkname(event){
                if(event.target.value != ''){
                    var _this = this;
                    console.log(event.target.value)
                    _this.$http.post(`${_this.dmoreurl}/saOrg/checkOrgCode`,{orgCode:event.target.value}).then(res => {
                        console.log(res)
                        if(res.data.code!='200'){
                            _this.$Message.error('组织编码重复！    请修改！');
                            _this.formValidate.orgCode='';
                        }
                    })
                }
            },
            newadd(name){
                if(this.formValidate.parentId == ''){
                    this.$Message.error('请选择组织机构!');
                    return false;
                }
                this.modal1 = true;
                this.$refs[name].resetFields();
                this.parentId=this.formValidate.parentId;
                Object.assign(this.$data.formValidate, this.$options.data().formValidate);
                this.formValidate.parentId=this.parentId;
            },
            asyncOK () {
                setTimeout(() => {
                    this.modal1 = false;
                }, 1000);
            },
            handleReset_2() {
                this.filter.orgCode='';
                this.filter.orgName='';
                this.filter.orgType='';
                this.filter.status='';
            },
            change(){
                var _this = this;
                _this.$http.post(`${_this.dmoreurl}/saOrg/getOrg`,_this.filter)
                    .then(function(response) {
                        console.log(response.data.data)
                        _this.list = response.data.data.list;
                        _this.filter.total = response.data.data.total;
                    })
            },
            changePage_zz(page) {
                console.log(page)
                var _this = this;
                _this.filter.pageIndex = page;
                _this.getData_zz();
            },
            getData_zz(){
                var _this = this;
                _this.filter.parentId=_this.formValidate.parentId;
                console.log(_this.filter)
                _this.$http.post(`${_this.dmoreurl}/saOrg/getChild`,_this.filter)
                    .then(function(response) {
                        console.log(response.data.data)
                        _this.list = response.data.data.list;
                        console.log(_this.list)
                        _this.filter.total = response.data.data.total;
                    })
            },
            getTreeData_zz(type) {
                var _this = this;
                _this.$http.post(`${_this.dmoreurl}/saOrg/getAll`,{tenantId:_this.filter.tenantId}).then(res => {//-------------id
                    _this.baseData = res.data.data.root.child;
                    let str=JSON.stringify(_this.baseData);
                    str=str.replace(/child/g,"children");
                    str=str.replace(/orgName/g,"title");
                    str=JSON.parse(str); 
                    str[0].expand=true;
                    _this.baseData=str; 
                })
                _this.getData_zz();
            },
            getTreeData_zzlogin(){
                var _this = this;
                _this.$http.post(`${_this.dmoreurl}/saOrg/getAll`,{tenantId:_this.filter.tenantId}).then(res => {
                    _this.baseData = res.data.data.root.child;
                    let str=JSON.stringify(_this.baseData);
                    str=str.replace(/child/g,"children");
                    str=str.replace(/orgName/g,"title");
                    str=JSON.parse(str); 
                    str[0].expand=true;
                    _this.baseData=str; 
                    _this.filter.parentId=_this.baseData[0].orgId;
                    console.log(_this.filter)
                    _this.$http.post(`${_this.dmoreurl}/saOrg/getChild`,_this.filter)
                        .then(function(response) {
                            console.log(response.data.data)
                            _this.list = response.data.data.list;
                            console.log(_this.list)
                            _this.filter.total = response.data.data.total;
                        })
                })
            },
            selectChange(node) {
                console.log(node[0])
                if(node.length==1){
                    this.formValidate.parentId=node[0].orgId;
                    this.getData_zz();
                }else{
                    this.formValidate.parentId='';
                }
            },
            handleSubmit_zz(name) {
            this.formValidate.tenantId=this.filter.tenantId;
            this.formValidate.createUser=this.filter.createUser;
             var _this = this;
             var submitUrl, submitMethods;
            if (_this.formValidate.orgId != '') {
                 submitUrl = `${_this.dmoreurl}/saOrg/saOrgUpdate`;
                 submitMethods = 'POST';
                 console.log('updata')
                 console.log(_this.formValidate)
             } else {
                 submitUrl = `${_this.dmoreurl}/saOrg/saOrgAdd`;
                 submitMethods = 'POST'
                 console.log('new')
                 console.log(_this.formValidate)
             }
             _this.$refs[name].validate((valid) => {
                if (valid) {
                    _this.$http({
                            url: submitUrl,
                            method: submitMethods,
                            data:_this.formValidate
                        })
                        .then(function(response) {
                            if(response.data.code=='200'){
                                _this.$Message.success('提交成功!');
                                _this.modal1 = false;
                                _this.getTreeData_zz();
                                _this.getData_zz();
                                Object.assign(_this.$data.formValidate, _this.$options.data().formValidate);
                            }
                            if(response.data.code=='400'){
                                _this.$Message.error('组织编码重复！    请修改！');
                            }  
                            if(response.data.code=='500'){
                                _this.$Message.error('error');
                            } 
                        });
                } else {
                    this.$Message.error('表单验证失败!');
                }
                })
            },
            remove_zz(index) {
                var _this = this;
                console.log(_this.list[index].orgId)
                this.$Modal.confirm({
                    title: '确认删除数据',
                    content: '<p>确认删除数据</p>',
                    onOk: () => {
                        let deleteUrl = `${_this.dmoreurl}/saOrg/saOrgDel`;
                        _this.$http.post(deleteUrl,{orgId:_this.list[index].orgId})
                            .then(response => {
                                _this.getTreeData_zz();
                                _this.getData_zz();
                                this.$Message.info('成功删除数据');
                            })
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除数据');
                    }
                });
            }
        },
        created() {
            this.getTreeData_zzlogin();
            this.formValidate.tenantId=this.filter.tenantId;
            this.formValidate.createUser=this.filter.createUser;
        }
    }
</script>
<style lang="scss" >
    .resert_5{
        font-size: 18px !important;
        position: relative;
        left: -82px;
        top: -86px;
        color: #5b8cff;
        cursor: pointer;
    }
    .congz_5:hover{
        background: #6896ff;
        border-color:#ffffff;
    }
    .congz_5{
        border-color:#5b8cff;
        width: 120px;
        height: 40px;
        background: #5b8cff;
        font-family: "microsoft yahei";
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        text-align: center;
        color:#ffffff;
        letter-spacing: 1px;
    }
    .page{
        height:100px;
        float:left;
        width: 848px;
    }
    .ivu-checkbox-wrapper {
        margin-right: 0px;
    }
    .formsub{
        margin-top: 51px;
        float:left;
    }
    .formt{
        width: 376px;
        float: left;
        padding: 20px 50px 20px 30px;
    }
    .creattree{
        float:left;
    }
    .tree{
        height:744px;
        box-sizing: border-box;
        min-height: 170px;
        padding-top: 15px;
        padding-bottom: 10px;
        width:130px;
        float: left;
        display: inline-block;
        border-right: 1px solid #dbe3f3;
    }
    .ivu-tree-arrow {
        cursor: pointer;
        display: inline-block;
        width: 15px;
        text-align: center;
    }
    .ivu-tree-title{
        font-size:14px;
    }
    .kuoz{
        float: left;
        margin-left: 16px;
        height: 60px;
        line-height: 60px;
    }
    .pagtree{
        padding: 30px 30px 30px 30px;
        float: right;
    }
    .tabtree{
        float:left;
        margin:30px 30px 10px 30px;
    }
    #serchtree{
        margin-right: 10px;
        width: 100px;
        height: 40px;
        border-radius: 40px;
        border:none;
        background: linear-gradient(to left top,rgb(81,84,255),rgb(91,140,255));
        font-family: "microsoft yahei";
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        text-align: center;
        color:#ffffff;
        letter-spacing: 1px;
        box-shadow: 0px 3px 1px rgba(91, 140, 255, 0.3);
    }
    #serchtree:hover{
        background: linear-gradient(to left top,rgb(94,97,255),rgb(105,150,255));
    }
    #cancel{
        width: 100px;
        height: 40px;
        border-radius: 40px;
        border:none;
        background:#aab0c0;
        font-family: "microsoft yahei";
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        text-align: center;
        color:#ffffff;
        letter-spacing: 1px;
        box-shadow: 0px 3px 1px rgba(170,176,191, 0.3);
    }
    #cancel:hover{
        background:#aab0c0;
    }
    #serch2{
        margin-right: 15px;
        width: 100px;
        height: 40px;
        border-radius: 40px;
        border:none;
        background: linear-gradient(to left top,rgb(81,84,255),rgb(91,140,255));
        font-family: "microsoft yahei";
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        text-align: center;
        color:#ffffff;
        letter-spacing: 1px;
        box-shadow: 0px 3px 1px rgba(91, 140, 255, 0.3);
    }
    #serch2:hover{
        background: linear-gradient(to left top,rgb(94,97,255),rgb(105,150,255));
    }
    .sost3{
        display: inline-block;
        width: 300px;
        padding-top: 20px;
    }
    .sost3_5{
        display: inline-block;
        width: 320px;
        padding-top: 20px;
    }
    .sosuo1{
        padding: 0px 0px 30px 30px;
        border-bottom: 1px solid #dbe3f3;
    }
    .sosuo3{
        float: left;
        padding: 10px 80px 40px 30px;
        border-bottom: 1px solid #dbe3f3;
        width: 848px;
    }
    .sosuo3_5{
        float: left;
        padding: 10px 0px 30px 30px;
        border-bottom: 1px solid #dbe3f3;
        width: 848px;
    }
    .title1{
        overflow: hidden;
        padding-left: 20px;
    }
</style>